<template>
  <div class="work-template">
    <topAndbottom>
      <template #title>模板配置</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form
              :model="searchParams"
              label-width="80px"
              @submit.native.prevent=""
              :inline="true"
              size="default"
            >
              <!-- <el-form-item label="分析名称">
                <el-input v-model="searchParams.name" />
              </el-form-item> -->
              <el-form-item>
                <!-- <el-button :icon="Search" @click="serachBtn"> 搜索 </el-button>
                <el-button
                  style="color: #ff7670"
                  :icon="Close"
                  @click="resetBtn"
                >
                  重置
                </el-button> -->
                <el-button :icon="Plus" type="success" @click="addBtn">
                  新增
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <el-tabs type="border-card" @tab-click="addTab">
              <el-tab-pane
                :label="item.name"
                v-for="(item, index) in stageTableData.list"
                :key="index"
              >
                <table-vue
                  @delete-btn="deleteBtn"
                  @editEcheckList="editEcheckList"
                  @edit-btn="editBtn"
                  :tableHeigth="tableHeigth"
                  :tableData="stageTableData.table"
                  :loading="stageTableData.Loading"
                ></table-vue>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="container-footer">footer数据</div>
        </div>
      </template>
    </topAndbottom>
    <addTem
      ref="RefTemplate"
      :stageId="stageTableData.list"
      @save="save"
    ></addTem>
    <!-- 需要一个id 来确保新增 -->
    <checkList
      ref="RefCkenList"
      :checkListData="checkListData"
      @deleteBtn="deleteBtns"
      @checkAdd="addBtns"
    ></checkList>
  </div>
</template>

<script setup lang='ts'>
import tableVue from "./components/table.vue";
import addTem from "./components/AddEdit.vue";
import checkList from "./components/checkList.vue";
import { reactive, toRefs, ref, onBeforeMount, onMounted } from "vue";
import { Search, Plus, Close } from "@element-plus/icons";
import useTemTable from "@/composables/01work/02TemPlate/useTemTable";
import useCheckList from "@/composables/01work/02TemPlate/useCheckList";
const {
  stageTableData,
  getCheckListPage,
  tableHeigth,
  addBtn,
  RefTemplate,
  save,
  editBtn,
  deleteBtn,
} = useTemTable();
const { RefCkenList, editEcheckList, checkListData, addBtns, deleteBtns } = useCheckList();
const searchParams = reactive({ name: "" });

const serachBtn = () => {};
const resetBtn = () => {};
const addTab = (tab, ev) => {
  getCheckListPage(stageTableData.list[tab.index].id);
};
</script>
<style scoped lang='scss'>
.work-template {
  height: 100%;

  :deep(.el-tabs--border-card) {
    background-color: transparent !important;
    border: none;
  }
  :deep(.el-form-item__label) {
    color: #fff;
  }
}
</style>